<template>
    <div id="app">
      <el-table :data="tableData2" style="width: 100%">
        <el-table-column prop="id" label="idd" width="180" />
        <el-table-column prop="productName" label="productName" width="180" />
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="Add">
              添加
            </el-button>
            <el-button link type="primary" size="small"
              @click="Update(scope.row.productName, scope.row.id)">修改</el-button>
            <el-button link type="primary" size="small" @click="Delect(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[2, 4, 6, 10]"
        :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="rows" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  
  
      <el-dialog v-model="dialogVisible" title="添加" width="500" :before-close="handleClose">
        <el-form :model="addUser" :rules="addUserRules" ref="addUserRef" label-width="100px">
          <el-form-item label="用户名称" prop="username">
            <el-input v-model="addUser.username" style="width: 240px" />
          </el-form-item>
        </el-form>
        <br />
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button @click="Add2">添加</el-button>
      </el-dialog>
  
      <el-dialog v-model="dialogVisible2" title="修改" width="500" :before-close="handleClose">
        <el-form :model="addUser2" :rules="addUserRules2" ref="addUserRef2" label-width="100px">
          <el-form-item label="用户名称" prop="username2">
            <el-input v-model="addUser2.username2" style="width: 240px" />
          </el-form-item>
        </el-form>
        <br />
        <el-button @click="dialogVisible2 = false">关闭</el-button>
        <el-button @click="Update2">修改</el-button>
      </el-dialog>
  
  
      <!-- <router-view></router-view> -->
    </div>
  </template>
  
  <script>
  //import HelloWorld from './components/HelloWorld.vue'
  import { ref, reactive, onMounted } from "vue";
  import axios from "axios";
  
  export default {
    name: 'App',
    setup() {
      let tableData = ref([]);
      let tableData2 = ref([]);
      let dialogVisible = ref(false);
      let dialogVisible2 = ref(false);
      let name = ref("");
      let name2 = ref("");
      let id3 = ref();
      let currentPage = ref(1);
      let pageSize = ref(2);
      let rows = ref(0);
  
      let addUser = reactive({
        username: ''
      });
  
      let addUser2 = reactive({
        username2: ''
      });
      let addUserRules = reactive({
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ]
      });
  
      let addUserRules2 = reactive({
        username2: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ]
      })
      const addUserRef = ref(null);
      const addUserRef2 = ref(null);
      function show() {
        axios.get("/api/ProductController/Select").then(resp => {
          //console.log(resp.data)
          tableData.value = resp.data;
          console.log(tableData.value)
        }).catch(err => {
          console.log(err);
        })
      };
  
      function Add() {
        dialogVisible.value = true;
      };
  
  
      function Add2() {
  
        addUserRef.value.validate((valid) => {
          if (valid) {
            axios.post("/api/ProductController/Add", {
              productName: addUser.username
            }).then(resp => {
              if (resp.data == true) {
                alert("添加成功!");
                show2();
                dialogVisible.value = false;
                name.value = "";
              } else {
                alert("添加失败!")
              }
            }).catch(err => {
              console.log(err)
            })
          }
        })
      };
  
      function Update(productName, id2) {
        dialogVisible2.value = true;
        name2.value = productName;
        id3.value = id2;
      };
  
      function Update2() {
        addUserRef2.value.validate((valid) => {
          axios.put("/api/ProductController/Update", {
            id: id3.value,
            productName: addUser2.username2
          }).then(resp => {
            if (resp.data == true) {
              alert("修改成功!");
              show2();
              dialogVisible2.value = false;
              name2.value = "";
            } else {
              alert("修改失败!");
            }
          }).catch(err => {
            console.log(err)
          })
        })
      };
  
      function Delect(row) {
        axios.delete("/api/ProductController/Remove", {
          data: { id: row, productName: "" }
        }).then(resp => {
          if (resp.data == true) {
            alert("删除成功!");
            show2();
          } else {
            alert("删除失败!");
          }
        }).catch(err => {
          console.log(err);
        })
      };
  
      function show2() {
        axios.get("/api/ProductController/GetFenYe", {
          params: {
            currentPage: currentPage.value,
            pageSize: pageSize.value
          }
        }).then(resp => {
          tableData2.value = resp.data.list;
          rows.value = resp.data.rows;
        }).catch(err => {
          console.log(err);
        })
      };
  
      function handleSizeChange(size) {
        pageSize.value = size;
        show2();
      }
  
      function handleCurrentChange(cpage) {
        currentPage.value = cpage;
        show2();
      }
  
      onMounted(() => {
        show2();
      })
  
      return {
        tableData,
        dialogVisible,
        dialogVisible2,
        Add,
        name,
        Add2,
        Update,
        name2,
        Update2,
        id3,
        Delect,
        currentPage,
        pageSize,
        rows,
        tableData2,
        handleCurrentChange,
        handleSizeChange,
        addUser,
        addUserRules,
        addUserRef,
        addUser2,
        addUserRules2,
        addUserRef2
      }
    }
    // components: {
    //   HelloWorld
    // }
  }
  </script>
  
  <style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  </style>
  